{% extends "base.html" %}

{% set current_menu = 'customer' %}
{% set current_page = 'customer_list' %}

{% block title %}客户管理 - 编辑客户{% endblock %}

{% block page_title %}{% endblock %}
{% block page_subtitle %}{% endblock %}

{% block content %}
<div class="container mx-auto">
    <!-- 面包屑导航 -->
    <nav class="text-sm breadcrumbs mb-6">
        <ol class="flex items-center space-x-2">
            <li><a href="{{ url_for('main.home') }}" class="text-gray-500 hover:text-gray-700">首页</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li><a href="{{ url_for('customer.list_customers') }}" class="text-gray-500 hover:text-gray-700">客户管理</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li class="text-gray-700">编辑客户</li>
        </ol>
    </nav>

    <div class="bg-white rounded-lg shadow p-6">
        <h2 class="text-xl font-bold text-gray-900 mb-6">编辑客户信息</h2>
        
        <form method="post" class="space-y-6">
            {{ form.hidden_tag() }}
            
            <!-- 基本信息 -->
            <div>
                <h3 class="text-lg font-medium text-gray-900 mb-4">基本信息</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        {{ form.name.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                        {{ form.name(class="form-input w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500") }}
                        {% if form.name.errors %}
                        <p class="mt-1 text-sm text-red-600">
                            {% for error in form.name.errors %}
                                {{ error }}
                            {% endfor %}
                        </p>
                        {% endif %}
                    </div>
                    
                    <div>
                        {{ form.customer_number.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                        {{ form.customer_number(class="form-input w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500", readonly=true) }}
                        <p class="mt-1 text-xs text-gray-500">客户编号自动生成，不可修改</p>
                    </div>
                    
                    <div>
                        {{ form.category.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                        {{ form.category(class="form-select w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500") }}
                        {% if form.category.errors %}
                        <p class="mt-1 text-sm text-red-600">
                            {% for error in form.category.errors %}
                                {{ error }}
                            {% endfor %}
                        </p>
                        {% endif %}
                    </div>
                    
                    <div>
                        {{ form.source.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                        <div class="flex space-x-2">
                            {{ form.source(class="form-select flex-1 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500") }}
                            <input type="text" id="source_other" name="source_other" 
                                   class="form-input flex-1 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" 
                                   placeholder="请输入其他来源" 
                                   {% if customer.source != '其他' %}style="display:none;"{% endif %}>
                        </div>
                        {% if form.source.errors %}
                        <p class="mt-1 text-sm text-red-600">
                            {% for error in form.source.errors %}
                                {{ error }}
                            {% endfor %}
                        </p>
                        {% endif %}
                    </div>
                    
                    <div>
                        {{ form.location.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                        <div class="flex space-x-2">
                            {{ form.location(class="form-select flex-1 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500") }}
                            <input type="text" id="location_other" name="location_other" 
                                   class="form-input flex-1 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" 
                                   placeholder="请输入其他归属地" 
                                   {% if customer.location != '其他' %}style="display:none;"{% endif %}>
                        </div>
                        {% if form.location.errors %}
                        <p class="mt-1 text-sm text-red-600">
                            {% for error in form.location.errors %}
                                {{ error }}
                            {% endfor %}
                        </p>
                        {% endif %}
                    </div>
                    
                    <div>
                        {{ form.manager_id.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                        {{ form.manager_id(class="form-select w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500") }}
                        {% if form.manager_id.errors %}
                        <p class="mt-1 text-sm text-red-600">
                            {% for error in form.manager_id.errors %}
                                {{ error }}
                            {% endfor %}
                        </p>
                        {% endif %}
                    </div>
                </div>
            </div>
            
            <!-- 联系信息 -->
            <div>
                <h3 class="text-lg font-medium text-gray-900 mb-4">联系信息</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        {{ form.phone.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                        {{ form.phone(class="form-input w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500") }}
                        {% if form.phone.errors %}
                        <p class="mt-1 text-sm text-red-600">
                            {% for error in form.phone.errors %}
                                {{ error }}
                            {% endfor %}
                        </p>
                        {% endif %}
                    </div>
                    
                    <div>
                        {{ form.email.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                        {{ form.email(class="form-input w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500") }}
                        {% if form.email.errors %}
                        <p class="mt-1 text-sm text-red-600">
                            {% for error in form.email.errors %}
                                {{ error }}
                            {% endfor %}
                        </p>
                        {% endif %}
                    </div>
                    
                    <div>
                        {{ form.province.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                        {{ form.province(class="form-select w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500") }}
                        {% if form.province.errors %}
                        <p class="mt-1 text-sm text-red-600">
                            {% for error in form.province.errors %}
                                {{ error }}
                            {% endfor %}
                        </p>
                        {% endif %}
                    </div>
                    
                    <div>
                        {{ form.city.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                        {{ form.city(class="form-select w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500") }}
                        {% if form.city.errors %}
                        <p class="mt-1 text-sm text-red-600">
                            {% for error in form.city.errors %}
                                {{ error }}
                            {% endfor %}
                        </p>
                        {% endif %}
                    </div>
                    
                    <div>
                        {{ form.district.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                        {{ form.district(class="form-select w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500") }}
                        {% if form.district.errors %}
                        <p class="mt-1 text-sm text-red-600">
                            {% for error in form.district.errors %}
                                {{ error }}
                            {% endfor %}
                        </p>
                        {% endif %}
                    </div>
                    
                    <div>
                        {{ form.address.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                        {{ form.address(class="form-input w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500") }}
                        {% if form.address.errors %}
                        <p class="mt-1 text-sm text-red-600">
                            {% for error in form.address.errors %}
                                {{ error }}
                            {% endfor %}
                        </p>
                        {% endif %}
                    </div>
                    
                    <div>
                        {{ form.website.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                        {{ form.website(class="form-input w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500") }}
                        {% if form.website.errors %}
                        <p class="mt-1 text-sm text-red-600">
                            {% for error in form.website.errors %}
                                {{ error }}
                            {% endfor %}
                        </p>
                        {% endif %}
                    </div>
                </div>
            </div>
            
            <!-- 转化信息 -->
            {% if customer.converted_from_lead_id %}
            <div>
                <h3 class="text-lg font-medium text-gray-900 mb-4">转化信息</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">来源线索</label>
                        <div class="form-input w-full rounded-md border-gray-300 bg-gray-50">
                            <a href="{{ url_for('lead.lead_detail', lead_id=customer.converted_from_lead_id) }}" class="text-primary hover:text-blue-600">
                                {{ customer.converted_from_lead.name if customer.converted_from_lead else '已删除' }}
                            </a>
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">转化日期</label>
                        <div class="form-input w-full rounded-md border-gray-300 bg-gray-50">
                            {{ customer.conversion_date | format_time if customer.conversion_date else '未知' }}
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
            
            <!-- 转化原因 -->
            {% if customer.converted_from_lead_id %}
            <div>
                {{ form.conversion_reason.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                {{ form.conversion_reason(class="form-textarea w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500", rows="3") }}
                {% if form.conversion_reason.errors %}
                <p class="mt-1 text-sm text-red-600">
                    {% for error in form.conversion_reason.errors %}
                        {{ error }}
                    {% endfor %}
                </p>
                {% endif %}
            </div>
            {% endif %}
            
            <!-- 备注信息 -->
            <div>
                {{ form.remarks.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                {{ form.remarks(class="form-textarea w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500", rows="3") }}
                {% if form.remarks.errors %}
                <p class="mt-1 text-sm text-red-600">
                    {% for error in form.remarks.errors %}
                        {{ error }}
                    {% endfor %}
                </p>
                {% endif %}
            </div>
            
            <!-- 提交按钮 -->
            <div class="flex justify-end space-x-3">
                <a href="{{ url_for('customer.customer_detail', customer_id=customer.id) }}" class="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition">
                    取消
                </a>
                <button type="submit" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-blue-600 transition">
                    保存修改
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock content %}

{% block extra_js %}
{{ super() }}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 客户来源选择变化处理
        const sourceSelect = document.getElementById('source');
        const sourceOtherInput = document.getElementById('source_other');
        
        sourceSelect.addEventListener('change', function() {
            if (this.value === '其他') {
                sourceOtherInput.style.display = 'block';
                sourceOtherInput.required = true;
            } else {
                sourceOtherInput.style.display = 'none';
                sourceOtherInput.required = false;
                sourceOtherInput.value = '';
            }
        });
        
        // 客户归属地选择变化处理
        const locationSelect = document.getElementById('location');
        const locationOtherInput = document.getElementById('location_other');
        
        locationSelect.addEventListener('change', function() {
            if (this.value === '其他') {
                locationOtherInput.style.display = 'block';
                locationOtherInput.required = true;
            } else {
                locationOtherInput.style.display = 'none';
                locationOtherInput.required = false;
                locationOtherInput.value = '';
            }
        });
        
        // 省市区联动
        const provinceSelect = document.getElementById('province');
        const citySelect = document.getElementById('city');
        const districtSelect = document.getElementById('district');
        
        // 省份数据
        const provinces = {
            '北京': ['北京市'],
            '天津': ['天津市'],
            '河北': ['石家庄市', '唐山市', '秦皇岛市', '邯郸市', '邢台市', '保定市', '张家口市', '承德市', '沧州市', '廊坊市', '衡水市'],
            '山西': ['太原市', '大同市', '阳泉市', '长治市', '晋城市', '朔州市', '晋中市', '运城市', '忻州市', '临汾市', '吕梁市'],
            '内蒙古': ['呼和浩特市', '包头市', '乌海市', '赤峰市', '通辽市', '鄂尔多斯市', '呼伦贝尔市', '巴彦淖尔市', '乌兰察布市'],
            '辽宁': ['沈阳市', '大连市', '鞍山市', '抚顺市', '本溪市', '丹东市', '锦州市', '营口市', '阜新市', '辽阳市', '盘锦市', '铁岭市', '朝阳市', '葫芦岛市'],
            '吉林': ['长春市', '吉林市', '四平市', '辽源市', '通化市', '白山市', '松原市', '白城市'],
            '黑龙江': ['哈尔滨市', '齐齐哈尔市', '鸡西市', '鹤岗市', '双鸭山市', '大庆市', '伊春市', '佳木斯市', '七台河市', '牡丹江市', '黑河市', '绥化市'],
            '上海': ['上海市'],
            '江苏': ['南京市', '无锡市', '徐州市', '常州市', '苏州市', '南通市', '连云港市', '淮安市', '盐城市', '扬州市', '镇江市', '泰州市', '宿迁市'],
            '浙江': ['杭州市', '宁波市', '温州市', '嘉兴市', '湖州市', '绍兴市', '金华市', '衢州市', '舟山市', '台州市', '丽水市'],
            '安徽': ['合肥市', '芜湖市', '蚌埠市', '淮南市', '马鞍山市', '淮北市', '铜陵市', '安庆市', '黄山市', '滁州市', '阜阳市', '宿州市', '六安市', '亳州市', '池州市', '宣城市'],
            '福建': ['福州市', '厦门市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龙岩市', '宁德市'],
            '江西': ['南昌市', '景德镇市', '萍乡市', '九江市', '新余市', '鹰潭市', '赣州市', '吉安市', '宜春市', '抚州市', '上饶市'],
            '山东': ['济南市', '青岛市', '淄博市', '枣庄市', '东营市', '烟台市', '潍坊市', '济宁市', '泰安市', '威海市', '日照市', '临沂市', '德州市', '聊城市', '滨州市', '菏泽市'],
            '河南': ['郑州市', '开封市', '洛阳市', '平顶山市', '安阳市', '鹤壁市', '新乡市', '焦作市', '濮阳市', '许昌市', '漯河市', '三门峡市', '南阳市', '商丘市', '信阳市', '周口市', '驻马店市'],
            '湖北': ['武汉市', '黄石市', '十堰市', '宜昌市', '襄阳市', '鄂州市', '荆门市', '孝感市', '荆州市', '黄冈市', '咸宁市', '随州市'],
            '湖南': ['长沙市', '株洲市', '湘潭市', '衡阳市', '邵阳市', '岳阳市', '常德市', '张家界市', '益阳市', '郴州市', '永州市', '怀化市', '娄底市'],
            '广东': ['广州市', '韶关市', '深圳市', '珠海市', '汕头市', '佛山市', '江门市', '湛江市', '茂名市', '肇庆市', '惠州市', '梅州市', '汕尾市', '河源市', '阳江市', '清远市', '东莞市', '中山市', '潮州市', '揭阳市', '云浮市'],
            '广西': ['南宁市', '柳州市', '桂林市', '梧州市', '北海市', '防城港市', '钦州市', '贵港市', '玉林市', '百色市', '贺州市', '河池市', '来宾市', '崇左市'],
            '海南': ['海口市', '三亚市', '三沙市', '儋州市'],
            '重庆': ['重庆市'],
            '四川': ['成都市', '自贡市', '攀枝花市', '泸州市', '德阳市', '绵阳市', '广元市', '遂宁市', '内江市', '乐山市', '南充市', '眉山市', '宜宾市', '广安市', '达州市', '雅安市', '巴中市', '资阳市'],
            '贵州': ['贵阳市', '六盘水市', '遵义市', '安顺市', '毕节市', '铜仁市'],
            '云南': ['昆明市', '曲靖市', '玉溪市', '保山市', '昭通市', '丽江市', '普洱市', '临沧市'],
            '西藏': ['拉萨市', '日喀则市', '昌都市', '林芝市', '山南市', '那曲市'],
            '陕西': ['西安市', '铜川市', '宝鸡市', '咸阳市', '渭南市', '延安市', '汉中市', '榆林市', '安康市', '商洛市'],
            '甘肃': ['兰州市', '嘉峪关市', '金昌市', '白银市', '天水市', '武威市', '张掖市', '平凉市', '酒泉市', '庆阳市', '定西市', '陇南市'],
            '青海': ['西宁市', '海东市'],
            '宁夏': ['银川市', '石嘴山市', '吴忠市', '固原市', '中卫市'],
            '新疆': ['乌鲁木齐市', '克拉玛依市', '吐鲁番市', '哈密市']
        };
        
        // 市区数据
        const districts = {
            '北京市': ['东城区', '西城区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区', '大兴区', '怀柔区', '平谷区', '密云区', '延庆区'],
            '天津市': ['和平区', '河东区', '河西区', '南开区', '河北区', '红桥区', '东丽区', '西青区', '津南区', '北辰区', '武清区', '宝坻区', '滨海新区', '宁河区', '静海区', '蓟州区'],
            '上海市': ['黄浦区', '徐汇区', '长宁区', '静安区', '普陀区', '虹口区', '杨浦区', '闵行区', '宝山区', '嘉定区', '浦东新区', '金山区', '松江区', '青浦区', '奉贤区', '崇明区'],
            '重庆市': ['万州区', '涪陵区', '渝中区', '大渡口区', '江北区', '沙坪坝区', '九龙坡区', '南岸区', '北碚区', '綦江区', '大足区', '渝北区', '巴南区', '黔江区', '长寿区', '江津区', '合川区', '永川区', '南川区', '璧山区', '铜梁区', '潼南区', '荣昌区', '开州区', '梁平区', '武隆区']
        };
        
        // 省份变化时更新城市
        provinceSelect.addEventListener('change', function() {
            const selectedProvince = this.value;
            citySelect.innerHTML = '<option value="">请选择城市</option>';
            districtSelect.innerHTML = '<option value="">请选择区县</option>';
            
            if (selectedProvince && provinces[selectedProvince]) {
                provinces[selectedProvince].forEach(function(city) {
                    const option = document.createElement('option');
                    option.value = city;
                    option.textContent = city;
                    if (city === '{{ customer.city or "" }}') {
                        option.selected = true;
                    }
                    citySelect.appendChild(option);
                });
            }
        });
        
        // 城市变化时更新区县
        citySelect.addEventListener('change', function() {
            const selectedCity = this.value;
            districtSelect.innerHTML = '<option value="">请选择区县</option>';
            
            if (selectedCity && districts[selectedCity]) {
                districts[selectedCity].forEach(function(district) {
                    const option = document.createElement('option');
                    option.value = district;
                    option.textContent = district;
                    if (district === '{{ customer.district or "" }}') {
                        option.selected = true;
                    }
                    districtSelect.appendChild(option);
                });
            } else {
                // 对于没有预设区县的城市，添加一个通用的区县选项
                const commonDistricts = ['市辖区', '市辖区'];
                commonDistricts.forEach(function(district) {
                    const option = document.createElement('option');
                    option.value = district;
                    option.textContent = district;
                    if (district === '{{ customer.district or "" }}') {
                        option.selected = true;
                    }
                    districtSelect.appendChild(option);
                });
            }
        });
        
        // 初始化时如果已选择省份，则加载对应城市
        if (provinceSelect.value) {
            const event = new Event('change');
            provinceSelect.dispatchEvent(event);
            
            // 如果已选择城市，则加载对应区县
            if (citySelect.value) {
                setTimeout(function() {
                    citySelect.dispatchEvent(event);
                }, 100);
            }
        }
    });
</script>
{% endblock %}